<!DOCTYPE html>
<html>
<head>
    <title>太阳系天体运行模拟</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        #solarCanvas {
            border: 1px solid rgba(255,255,255,0.1);
        }
        #controls {
            position: fixed;
            top: 20px;
            left: 20px;
            color: white;
            z-index: 100;
        }
        button {
            padding: 8px 15px;
            margin: 5px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            cursor: pointer;
        }
        /* 启用GPU加速 */
        canvas {
        transform: translateZ(0);
        will-change: transform;
        }
        /* 优化文本渲染 */
        #infoText {
        text-shadow: 0 0 2px rgba(255,255,255,0.8); /* 抗锯齿 */
        backface-visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="controls">
        <button onclick="toggleAnimation()">暂停/继续</button>
        <button onclick="toggleOrbits()">显示/隐藏轨道</button>
        <button onclick="toggleText()">显示/隐藏文字</button>
        <div id="infoText" style="display: none; position: fixed; top: 60px; left:20px; color:white;">
            当前状态：动画运行中 | 轨道显示开启
        </div>
    </div>
    <canvas id="solarCanvas"></canvas>

<script>
// FPS计数器
let fps = 0, lastFrame = Date.now();
function calcFPS() {
  const now = Date.now();
  fps = Math.round(1000 / (now - lastFrame));
  lastFrame = now;
  document.getElementById('fpsCounter').innerText = `FPS: ${fps}`;
}

const canvas = document.getElementById('solarCanvas');
const ctx = canvas.getContext('2d');
let animationRunning = true;
let showOrbits = true;

function checkBoundaries() {
  celestialBodies.planets.forEach(planet => {
    const maxOrbit = Math.min(canvas.width, canvas.height)*0.45;
    planet.orbit = Math.min(planet.orbit, maxOrbit);
  });
}


// 天体参数配置（简化比例）
const celestialBodies = {
    sun: {
        radius: 40,
        color: '#FFD700',
        position: {x: canvas.width/2, y: canvas.height/2}
    },
    planets: [
        { name: '水星', radius: 8,  orbit: 60,  speed: 0.02,  color: '#A0522D' },
        { name: '金星', radius: 12, orbit: 100, speed: 0.015, color: '#DEB887' },
        { name: '地球', radius: 14, orbit: 140, speed: 0.01,  color: '#4169E1' },
        { name: '火星', radius: 10, orbit: 180, speed: 0.008, color: '#CD5C5C' },
        { name: '木星', radius: 28, orbit: 240, speed: 0.005, color: '#DAA520' },
        { name: '土星', radius: 24, orbit: 300, speed: 0.004, color: '#F4A460', ring: true },
        { name: '天王星', radius: 18, orbit: 350, speed: 0.003, color: '#87CEEB' },
        { name: '海王星', radius: 16, orbit: 400, speed: 0.002, color: '#4682B4' }
    ]
};

// 初始化行星角度
celestialBodies.planets.forEach(p => p.angle = Math.random() * Math.PI * 2);

function createGradient(ctx, x, y, r, color) {
    const gradient = ctx.createRadialGradient(x, y, r*0.3, x, y, r*1.5);
    gradient.addColorStop(0, color);
    gradient.addColorStop(1, 'rgba(255,255,255,0.1)');
    return gradient;
}

function drawCelestialBody() {
    if(animationRunning) requestAnimationFrame(drawCelestialBody);
    // 使用requestAnimationFrame保持帧同步
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 绘制太阳
    const sunGrad = createGradient(ctx, celestialBodies.sun.position.x, 
        celestialBodies.sun.position.y, celestialBodies.sun.radius, celestialBodies.sun.color);
    ctx.beginPath();
    ctx.arc(celestialBodies.sun.position.x, celestialBodies.sun.position.y, 
        celestialBodies.sun.radius, 0, Math.PI*2);
    ctx.fillStyle = sunGrad;
    ctx.fill();

    celestialBodies.planets.forEach(planet => {
        // 更新行星角度
        if(animationRunning) planet.angle += planet.speed;
        
        // 计算行星位置
        const x = celestialBodies.sun.position.x + planet.orbit * Math.cos(planet.angle);
        const y = celestialBodies.sun.position.y + planet.orbit * Math.sin(planet.angle);

        // 绘制轨道
        if(showOrbits) {
            ctx.beginPath();
            ctx.arc(celestialBodies.sun.x, celestialBodies.sun.y, planet.orbit, 0, Math.PI*2);
            ctx.strokeStyle = 'rgba(255,255,255,0.1)';
            ctx.stroke();
        }

        // 绘制行星
        const planetGrad = createGradient(ctx, x, y, planet.radius, planet.color);
        ctx.beginPath();
        ctx.arc(x, y, planet.radius, 0, Math.PI*2);
        ctx.fillStyle = planetGrad;
        ctx.fill();

        // 绘制土星环
        if(planet.ring) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(planet.angle);
            ctx.strokeStyle = 'rgba(210,180,140,0.5)';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.ellipse(0, 0, planet.radius*2, planet.radius*0.6, 0, 0, Math.PI*2);
            ctx.stroke();
            ctx.restore();
        }

        // 绘制标签
        ctx.fillStyle = 'white';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(planet.name, x, y + planet.radius + 15);
    });
    // 限制文本更新频率
    if(animationFrameCount % 2 === 0) {
        updateTextPosition();
    }
    animationFrameCount = requestAnimationFrame(drawCelestialBody);
}

// 窗口自适应
let devicePixelRatio = window.devicePixelRatio || 1;

function resizeCanvas() {
    const dpr = window.devicePixelRatio || 1;
    canvas.width = window.innerWidth * dpr;
    canvas.height = window.innerHeight * dpr;
    ctx.scale(dpr, dpr);
    
    // 天体位置重计算
    celestialBodies.sun.position.x = canvas.width/(2*dpr);
    celestialBodies.sun.position.y = canvas.height/(2*dpr);
    checkBoundaries();
}
window.onresize = resizeCanvas;
resizeCanvas();

// 控制函数
function toggleAnimation() {
  animationRunning = !animationRunning;
  if(animationRunning) drawCelestialBody(); // 恢复时重新启动循环
}
function toggleOrbits() {
  showOrbits = !showOrbits;
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 立即清除旧画面
}
function toggleText() {
  const text = document.getElementById('infoText');
  text.style.display = (text.style.display === 'none') ? 'block' : 'none';
  
  // 同步更新状态信息（网页8扩展方案）
  const status1 = animationRunning ? '运行中' : '已暂停';
  const status2 = showOrbits ? '开启' : '关闭';
  text.innerHTML = `当前状态：动画${status1} | 轨道显示${status2}`;
}

// 启动动画
drawCelestialBody();
</script>
</body>
</html>